<template>
    <div>
        <el-steps :active="active" align-center >
            <el-step title="步骤 1" icon="el-icon-edit" description="请输入找回账号"></el-step>
            <el-step title="步骤 2" icon="el-icon-upload" description="身份验证"></el-step>
            <el-step title="步骤 3" icon="el-icon-picture" description="重置密码"></el-step>
            <el-step title="步骤 4" icon="el-icon-success" description="完成"></el-step>
        </el-steps>



        <el-form :model="ruleForm1" v-show="active==0" status-icon :rules="rules1" ref="ruleForm1" label-width="100px"
                 class="demo-ruleForm">
            <el-form-item label="账号" prop="userName">
                <el-input  v-model="ruleForm1.userName" autocomplete="off"></el-input>
            </el-form-item>
            <el-button type="primary" @click="submitForm1('ruleForm1')">提交</el-button>
            <el-button @click="resetForm('ruleForm1')">重置</el-button>
        </el-form>
        <el-form :model="ruleForm2" v-show="active==1" status-icon :rules="rules2" ref="ruleForm2" label-width="100px"
                 class="demo-ruleForm">
            <el-form-item label="手机号" prop="手机号">
                <el-input  v-model="ruleForm2.phonenumber" autocomplete="off" readonly></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="authcode">
                <el-input  v-model="ruleForm2.authcode" autocomplete="off" ></el-input>
                <el-button type="primary" @click="sendSms()">获取验证码</el-button>
            </el-form-item>
            <el-button type="primary" @click="submitForm2('ruleForm2')">提交</el-button>
            <el-button @click="resetForm('ruleForm2')">重置</el-button>


        </el-form>


        <el-form :model="ruleForm3" v-show="active==2" status-icon :rules="rules3" ref="ruleForm3" label-width="100px"
                 class="demo-ruleForm">
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm3.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkpassword">
                <el-input type="password" v-model="ruleForm3.checkpassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm3('ruleForm3')">提交</el-button>
                <el-button @click="resetForm('ruleForm3')">重置</el-button>
            </el-form-item>
        </el-form>
        <div v-show="active==3">
            <span>密码修改完成五秒后退出</span>
            <el-divider></el-divider>
        </div>

    </div>
</template>

<script>
    export default {
        name: "LosePassword",
        data() {
            var validaepassword1 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm3.checkpassword !== '') {
                        this.$refs.ruleForm3.validateField('checkpassword1');
                    }
                    callback();
                }
            };
            var validatepassword1 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm3.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return {
                mcode:'',
                ruleForm1: {
                    userName: '',
                },
                ruleForm2: {
                    phonenumber: "",
                    authcode: ""
                },
                ruleForm3: {
                    userId: '',
                    password: '',
                    checkpassword: '',
                },
                active: 0,
                authcode: '',
                rules1: {
                    userName: [
                        {required: true, message: '账号不为空', trigger: 'blur'}
                    ],
                },
                rules2: {
                    authcode: [
                        {required: true, message: '验证码不为空', trigger: 'blur'}
                    ],
                },
                rules3: {
                    password: [
                        {validator: validaepassword1, trigger: 'blur'}
                    ],
                    checkpassword: [
                        {validator: validatepassword1, trigger: 'blur'}
                    ],
                }
            };
        },
        methods: {
            //账号表单
            submitForm1(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.ruleForm1)
                        var that = this;
                        this.$http.get(`system/user/selByUserName/${this.ruleForm1.userName}`).then(function (response) {
                            console.log(response)
                            if (response.data.success) {
                                that.ruleForm3.userId = response.data.result.userId;
                                that.ruleForm2.phonenumber = response.data.result.phonenumber;
                                that.active++;
                            } else {
                                that.$message.error(response.data.message);
                            }

                        });

                    } else {
                        this.$message.error('error submit!!');
                        return false;
                    }
                });
            },
//验证码
            submitForm2(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.ruleForm1.userId = this.userId
                        if (this.ruleForm2.authcode==this.mcode){
                            this.active++;
                        }else{
                            this.$message.error('验证码错误!!');
                        }
                    } else {
                        this.$message.error('error submit!!');
                        return false;
                    }
                });
            },
            //修改密码
            submitForm3(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.ruleForm3)
                        var that = this
                        this.$http.post(`system/user/changeforgetpsw`, this.ruleForm3).then(function (response) {
                            if (response.data.success) {
                                that.$message.success(response.data.message);
                                that.active++;

                            } else {
                                that.$message.error(response.data.message);
                            }
                        })

                        setTimeout(() => { //延时加载初始化函数
                            this.exit();
                        }, 2000)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            exit() {
                location.reload();
                sessionStorage.clear()
            },
            sendSms(){
                var that=this;
                this.$http.get(`system/sms/${this.ruleForm2.phonenumber}`).then(function (response) {
                    console.log(response)
                    if (response.data.success) {
                        that.mcode=response.data.result.mcode;
                    } else {
                        that.$message.error(response.data.message);
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>